<template>
    <div class="system-role-container layout-padding">
      <div class="system-role-padding layout-padding-auto layout-padding-view">
        <div class="m-header">
          <div class="pro-name">
            <el-input
              clearable
              size="small"
              placeholder="请输入人员名称"
              v-model="proName"
              :suffix-icon="Search"
            />
          </div>

          <div style="display: flex;">
               <el-button
              size="small"
              @click="dowLoad_DATA"
              :icon="Download"
              type="success"
              >工作量统计下载
              </el-button>
             
            <el-button
              size="small"
              @click="newPerson"
              :icon="CirclePlus"
              type="primary"
              >新增人员
              </el-button>
          </div>
        </div>
  
        <div class="table_content">
          <el-table
            ref="table_s_exp"
            :height="activeHeight"
            style="width: 100%"
            :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
            :data="tableDataPro"
          >
            
            <el-table-column
               fixed
              show-overflow-tooltip
              type="index"
              width="80"
              label="序号"
              align="center"
            />
            <el-table-column
            width="110"
              sortable
              fixed
              show-overflow-tooltip
              label="工作证号"
                align="center"
              prop="job_number"
            ></el-table-column>

            <el-table-column
              sortable
              fixed
              show-overflow-tooltip
              label="姓名"
              prop="name"
            ></el-table-column>
            <el-table-column
              width="80"
            fixed
             label="性别"
             align="center"
              prop="sex"
            >
            <template  #header>
            <div style="display: flex; align-items: center">
              <div style="margin-right: 5px">性别</div>
              <el-popover :width="200" trigger="hover">
                <template #reference>
                  <div
                    class="icone"
                    :class="sex_.length == 0 ? '' : 'active'"
                  >
                    <el-icon>
                      <Filter />
                    </el-icon>
                  </div>
                </template>
                <el-select-v2
                 
                  :teleported="false"
                  size="small"
                  style="width: 180px; margin-right: 10px; z-index: 2000"
                  clearable
                  filterable
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  :options="[

                    {
                        value:'男',
                        label:'男'
                    },
                    {
                        value:'女',
                        label:'女'
                    },
                  ]"
                  v-model="sex_"
                  placeholder="请输入"
                >
                </el-select-v2>
              </el-popover>
            </div>
          </template>
  
          </el-table-column>
            <el-table-column
              sortable
              width="110"
              label="出生日期"
              show-overflow-tooltip
              prop="birthday"
              align="center"
              
            >
          
            </el-table-column>
            <el-table-column
              sortable
              width="80"
              label="年龄"
              show-overflow-tooltip
              prop="age"
                align="center"
            >
          
            </el-table-column>
            <el-table-column
             width="150"
              label="毕业院校"
              show-overflow-tooltip
              prop="school"
            >
          
            </el-table-column>
            <el-table-column
              width="100"
             label="所学专业"
             show-overflow-tooltip
             prop="school_major"
           >
         
           </el-table-column>
          
            <el-table-column
             width="100"
              label="现专业"
              show-overflow-tooltip
              prop="work_major"
            >
  
            <template  #header>
            <div style="display: flex; align-items: center">
              <div style="margin-right: 5px">现专业</div>
              <el-popover :width="200" trigger="hover">
                <template #reference>
                  <div
                    class="icone"
                    :class="work_major_.length == 0 ? '' : 'active'"
                  >
                    <el-icon>
                      <Filter />
                    </el-icon>
                  </div>
                </template>
                <el-select-v2
                :teleported="false"
                 size="small"
                 style="width: 180px; margin-right: 10px; z-index: 2000"
                 clearable
                 filterable
                 multiple
                 collapse-tags
                 collapse-tags-tooltip
                 :options="work_major_options"
                 v-model="work_major_"
                 placeholder="请输入"
               >
               </el-select-v2>
              </el-popover>
            </div>
          </template>
             
            </el-table-column>

            <el-table-column
             width="110"
             label="学历"
             show-overflow-tooltip
             prop="educational"
           >
 
           <!-- <template  #header>
           <div style="display: flex; align-items: center">
             <div style="margin-right: 5px">学历</div>
             <el-popover :width="200" trigger="hover">
               <template #reference>
                 <div
                   class="icone"
                   :class="educational_.length == 0 ? '' : 'active'"
                 >
                   <el-icon>
                     <Filter />
                   </el-icon>
                 </div>
               </template>
               <el-select-v2
               :teleported="false"
                size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                :options="educational__options"
                v-model="educational_"
                placeholder="请输入"
              >
              </el-select-v2>
             </el-popover>
           </div>
         </template> -->
            
           </el-table-column>

            <el-table-column
            sortable
             width="140"
              label="参加工作时间"
              show-overflow-tooltip
              prop="work_time"
            >
            </el-table-column>

            
            <el-table-column
             
             label="职称"
             show-overflow-tooltip
             prop="professional_post"
           >
 
           <template  #header>
           <div style="display: flex; align-items: center">
             <div style="margin-right: 5px">职称</div>
             <el-popover :width="200" trigger="hover">
               <template #reference>
                 <div
                   class="icone"
                   :class="professional_post_.length == 0 ? '' : 'active'"
                 >
                   <el-icon>
                     <Filter />
                   </el-icon>
                 </div>
               </template>
               <el-select-v2
               :teleported="false"
                size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                :options="professional_post_options"
                v-model="professional_post_"
                placeholder="请输入"
              >
              </el-select-v2>
             </el-popover>
           </div>
         </template>
            
           </el-table-column>
          
            <el-table-column
            sortable
            width="110"
              label="任职时间"
              show-overflow-tooltip
              prop="tenure"
            ></el-table-column>



            <el-table-column
             
             label="资格"
             show-overflow-tooltip
             prop="qualification"
           >
 
           <template  #header>
           <div style="display: flex; align-items: center">
             <div style="margin-right: 5px">资格</div>
             <el-popover :width="200" trigger="hover">
               <template #reference>
                 <div
                   class="icone"
                   :class="qualification_.length == 0 ? '' : 'active'"
                 >
                   <el-icon>
                     <Filter />
                   </el-icon>
                 </div>
               </template>
               <el-select-v2
               :teleported="false"
                size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                :options="qualification_options"
                v-model="qualification_"
                placeholder="请输入"
              >
              </el-select-v2>
             </el-popover>
           </div>
         </template>
            
           </el-table-column>

           <el-table-column
              label="办公电话"
              show-overflow-tooltip
              prop="telephone"
            ></el-table-column>


            <el-table-column
            width="130"
              label="手机"
              show-overflow-tooltip
              prop="cellphone"
            ></el-table-column>

            <el-table-column
            width="180"
              label="注册类别"
              show-overflow-tooltip
              prop="registration"
            ></el-table-column>

            <el-table-column
              width="110"
              label="类别"
              show-overflow-tooltip
              prop="design_class"
            ></el-table-column>

            <el-table-column
             width="110"
             label="设计岗位"
             show-overflow-tooltip
             prop="design_post"
           >
 
           <template  #header>
           <div style="display: flex; align-items: center">
             <div style="margin-right: 5px">设计岗位</div>
             <el-popover :width="200" trigger="hover">
               <template #reference>
                 <div
                   class="icone"
                   :class="design_post_.length == 0 ? '' : 'active'"
                 >
                   <el-icon>
                     <Filter />
                   </el-icon>
                 </div>
               </template>
               <el-select-v2
               :teleported="false"
                size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                :options="design_post_options"
                v-model="design_post_"
                placeholder="请输入"
              >
              </el-select-v2>
             </el-popover>
           </div>
         </template>
            
           </el-table-column>


           <el-table-column
            width="180"
           sortable
              label="证书编号"
              show-overflow-tooltip
              prop="certificate_number"
            ></el-table-column>
            <el-table-column
             width="140"
           sortable
              label="证书到期日期"
              show-overflow-tooltip
              prop="certificate_endtime"
            ></el-table-column>
            <el-table-column
           width="150"
              label="类别范围"
              show-overflow-tooltip
              prop="class_scope"
            ></el-table-column>

            <el-table-column
             width="140"
            sortable
          label="继续教育时间"
          show-overflow-tooltip
          prop="continuing_education_time"
        ></el-table-column>

          <el-table-column
             width="110"
            
          label="是否退休"
          show-overflow-tooltip
          prop="continuing_education_time"
        >

         <template  #header>
           <div style="display: flex; align-items: center">
             <div style="margin-right: 5px">是否退休</div>
             <el-popover :width="200" trigger="hover">
               <template #reference>
                 <div
                   class="icone"
                   :class="reT_.length == 0 ? '' : 'active'"
                 >
                   <el-icon>
                     <Filter />
                   </el-icon>
                 </div>
               </template>
               <el-select-v2
               :teleported="false"
                size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                :options="[
                  {
                    label: '已退休',
                    value: true
                  },
                  {
                    label: '未退休',
                    value: false
                  },
                ]"
                v-model="reT_"
                placeholder="请输入"
              >
              </el-select-v2>
             </el-popover>
           </div>
         </template>

        <template #default="{ row }">
          <el-tag v-if='row.retirement' size="small" type="danger">已退休</el-tag>
           <el-tag v-if='!row.retirement' size="small" type="success">未退休</el-tag>
          
        </template>
      </el-table-column>

        <el-table-column
           width="130"
            sortable
          label="备注"
          show-overflow-tooltip
          prop="note"
        ></el-table-column>

        <el-table-column fixed="right" label="操作" width="100" align="center">
        <template #default="{ row }">
      
          <el-button
           link
            type="primary"
            size="small"
            @click="editTable(row)"
            >编辑</el-button
          >

          <el-popconfirm
            placement="left"
            @confirm="deleteRow(row)"
            title="确认删除?"
          >
            <template #reference>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
          
          </el-table>
        </div>
      </div>
  
     
      <el-dialog
      @close="closeFrom(RefEdit)"
      title="编辑人员信息"
      v-model="editDio"
      width="35%"
    >
      <el-form
        ref="RefEdit"
        size="small"
        :model="editData"
        :rules="RulesEdit"
        label-width="100px"
      >
      <div style="display: flex;
    flex-wrap: wrap;
    align-items: center;">
        <el-form-item class="my_item" label="工作证号" prop="job_number">
            <el-input
            size="small"
           v-model="editData.job_number"
            placeholder="请输入设备名称"
          />
        </el-form-item>
        <el-form-item class="my_item" label="姓名" prop="name">
          <el-input
            size="small"
         v-model="editData.name"
            placeholder="请输入设备名称"
          />
        </el-form-item>

        <el-form-item class="my_item" label="性别" prop="sex">
         <el-select
         size="small"

          v-model="editData.sex"
          placeholder="请选择性别"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in [{
            value:'男',
            label:'男'
          },
          {
            value:'女',
            label:'女'
          },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
        </el-form-item>


        <el-form-item class="my_item" label="出生日期" prop="birthday">
            <el-date-picker
            style="width: 100%;"
               v-model="editData.birthday"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择日期"
                 
                  />
           
        </el-form-item>

        <el-form-item class="my_item" label="毕业院校" prop="school">
          <el-input
            size="small"
         v-model="editData.school"
            placeholder="请输入毕业院校"
          />
        </el-form-item>

        <el-form-item class="my_item" label="所学专业" prop="school_major">
          <el-input
            size="small"
         v-model="editData.school_major"
            placeholder="请输入所学专业"
          />
        </el-form-item>

        
        <el-form-item class="my_item" label="现专业" prop="work_major">
            <el-select
         size="small"

          v-model="editData.work_major"
          placeholder="请选择现专业"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in work_major_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
        </el-form-item>

        <el-form-item class="my_item" label="学历" prop="educational">
            <el-input
            size="small"
          v-model="editData.educational"
            placeholder="请输入学历"
          />
          
        </el-form-item>

        <el-form-item class="my_item" label="参加工作时间" prop="work_time">
            <el-date-picker
            style="width: 100%;"
               v-model="editData.work_time"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择日期"
                 
                  />
           
        </el-form-item>



        <el-form-item class="my_item" label="职称" prop="professional_post">
            <el-select
         size="small"

          v-model="editData.professional_post"
          placeholder="请选择现职称"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in professional_post_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
        </el-form-item>

        <el-form-item class="my_item" label="任职时间" prop="tenure">
            <el-date-picker
            style="width: 100%;"
               v-model="editData.tenure"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择任职时间"
                 
                  />
           
        </el-form-item>

        <el-form-item class="my_item" label="资格" prop="qualification">
            <el-select
         size="small"

          v-model="editData.qualification"
          placeholder="请选择资格"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in qualification_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
           
        </el-form-item>


        <el-form-item class="my_item" label="办公电话" prop="telephone">
          <el-input
            size="small"
         v-model="editData.telephone"
            placeholder="请输入办公电话"
          />
        </el-form-item>


        <el-form-item class="my_item" label="手机" prop="cellphone">
          <el-input
            size="small"
         v-model="editData.cellphone"
            placeholder="请输入手机"
          />
        </el-form-item>

        <el-form-item class="my_item" label="注册类别" prop="registration">
          <el-input
            size="small"
         v-model="editData.registration"
            placeholder="请输入注册类别"
          />
        </el-form-item>

        <el-form-item class="my_item" label="类别" prop="design_class">
          <el-input
            size="small"
         v-model="editData.design_class"
            placeholder="请输入类别"
          />
        </el-form-item>


        <el-form-item class="my_item" label="设计岗位" prop="design_post">
            <el-select
         size="small"

          v-model="editData.design_post"
          placeholder="请选择设计岗位"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in design_post_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
           
        </el-form-item>

        <el-form-item class="my_item" label="证书编号" prop="certificate_number">
          <el-input
            size="small"
         v-model="editData.certificate_number"
            placeholder="请输入证书编号"
          />
        </el-form-item>

        <el-form-item class="my_item" label="到期日期" prop="certificate_endtime">
            <el-date-picker
            style="width: 100%;"
               v-model="editData.certificate_endtime"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择证书到期日期"
                 
                  />
        </el-form-item>

        <el-form-item class="my_item" label="类别范围" prop="class_scope">
          <el-input
            size="small"
         v-model="editData.class_scope"
            placeholder="请输入类别范围"
          />
        </el-form-item>


        <el-form-item class="my_item" label="继续教育时间" prop="continuing_education_time">
            <el-input
            size="small"
         v-model="editData.continuing_education_time"
            placeholder="请输入继续教育时间"
          />
        </el-form-item>


        <el-form-item class="my_item" label="是否退休" prop="continuing_education_time">
            <el-radio-group size="small" v-model="editData.retirement">
    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
    <el-radio size="small" :label='true'>已退休</el-radio>
    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
    <el-radio size="small" :label='false'>未退休</el-radio>
  </el-radio-group>
        </el-form-item>


        <el-form-item class="my_item" label="备注" prop="note">
          <el-input
            size="small"
         v-model="editData.note"
            placeholder="请输入备注"
          />
        </el-form-item>

        <el-form-item class="my_item" label="" >
         
        </el-form-item>
    </div>

        <el-form-item>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="editDio = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
              type="primary"
              @click="handleCopyEquipEdit(RefEdit)"
              >确 定</el-button
            >
          </div>
        </el-form-item>
 
      </el-form>
    </el-dialog>

    
    <el-dialog
      @close="addcCloseFrom(RefAdd)"
      title="新增人员信息"
      v-model="addDio"
      width="35%"
    >
      <el-form
     
        ref="RefAdd"
        size="small"
        :model="addData"
        :rules="RulesEdit"
        label-width="100px"
      >
      <div style="display: flex;
    flex-wrap: wrap;
    align-items: center;">
        <el-form-item class="my_item" label="工作证号" prop="job_number">
            <el-input
            size="small"
           v-model="addData.job_number"
            placeholder="请输入设备名称"
          />
        </el-form-item>
        <el-form-item class="my_item" label="姓名" prop="name">
          <el-input
            size="small"
         v-model="addData.name"
            placeholder="请输入设备名称"
          />
        </el-form-item>

        <el-form-item class="my_item" label="性别" prop="sex">
         <el-select
         size="small"

          v-model="addData.sex"
          placeholder="请选择性别"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in [{
            value:'男',
            label:'男'
          },
          {
            value:'女',
            label:'女'
          },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
        </el-form-item>


        <el-form-item class="my_item" label="出生日期" prop="birthday">
            <el-date-picker
            style="width: 100%;"
               v-model="addData.birthday"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择日期"
                 
                  />
           
        </el-form-item>

        <el-form-item class="my_item" label="毕业院校" prop="school">
          <el-input
            size="small"
         v-model="addData.school"
            placeholder="请输入毕业院校"
          />
        </el-form-item>

        <el-form-item class="my_item" label="所学专业" prop="school_major">
          <el-input
            size="small"
         v-model="addData.school_major"
            placeholder="请输入所学专业"
          />
        </el-form-item>

        
        <el-form-item class="my_item" label="现专业" prop="work_major">
            <el-select
         size="small"

          v-model="addData.work_major"
          placeholder="请选择现专业"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in work_major_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
        </el-form-item>

        <el-form-item class="my_item" label="学历" prop="educational">
            <el-input
            size="small"
          v-model="editData.educational"
            placeholder="请输入学历"
          />
        </el-form-item>

        <el-form-item class="my_item" label="参加工作时间" prop="work_time">
            <el-date-picker
            style="width: 100%;"
               v-model="addData.work_time"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择日期"
                 
                  />
           
        </el-form-item>



        <el-form-item class="my_item" label="职称" prop="professional_post">
            <el-select
         size="small"

          v-model="addData.professional_post"
          placeholder="请选择现职称"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in professional_post_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
        </el-form-item>

        <el-form-item class="my_item" label="任职时间" prop="tenure">
            <el-date-picker
            style="width: 100%;"
               v-model="addData.tenure"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择任职时间"
                 
                  />
           
        </el-form-item>

        <el-form-item class="my_item" label="资格" prop="qualification">
            <el-select
         size="small"

          v-model="addData.qualification"
          placeholder="请选择资格"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in qualification_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
           
        </el-form-item>


        <el-form-item class="my_item" label="办公电话" prop="telephone">
          <el-input
            size="small"
         v-model="addData.telephone"
            placeholder="请输入办公电话"
          />
        </el-form-item>


        <el-form-item class="my_item" label="手机" prop="cellphone">
          <el-input
            size="small"
         v-model="addData.cellphone"
            placeholder="请输入手机"
          />
        </el-form-item>

        <el-form-item class="my_item" label="注册类别" prop="registration">
          <el-input
            size="small"
         v-model="addData.registration"
            placeholder="请输入注册类别"
          />
        </el-form-item>

        <el-form-item class="my_item" label="类别" prop="design_class">
          <el-input
            size="small"
         v-model="addData.design_class"
            placeholder="请输入类别"
          />
        </el-form-item>


        <el-form-item class="my_item" label="设计岗位" prop="design_post">
            <el-select
         size="small"

          v-model="addData.design_post"
          placeholder="请选择设计岗位"
          clearable
          style="width: 100%"
         >
         <el-option
          v-for="item in design_post_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
         ></el-option>

       
         </el-select>
           
        </el-form-item>

        <el-form-item class="my_item" label="证书编号" prop="certificate_number">
          <el-input
            size="small"
         v-model="addData.certificate_number"
            placeholder="请输入证书编号"
          />
        </el-form-item>

        <el-form-item class="my_item" label="到期日期" prop="certificate_endtime">
            <el-date-picker
            style="width: 100%;"
               v-model="addData.certificate_endtime"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择证书到期日期"
                 
                  />
        </el-form-item>

        <el-form-item class="my_item" label="类别范围" prop="class_scope">
          <el-input
            size="small"
         v-model="addData.class_scope"
            placeholder="请输入类别范围"
          />
        </el-form-item>


        <el-form-item class="my_item" label="继续教育时间" prop="continuing_education_time">
            <el-input
            size="small"
         v-model="addData.continuing_education_time"
            placeholder="请输入继续教育时间"
          />
        </el-form-item>


           <el-form-item class="my_item" label="是否退休" prop="continuing_education_time">
            <el-radio-group size="small" v-model="addData.retirement">
    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
    <el-radio size="small" :label='true'>已退休</el-radio>
    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
    <el-radio size="small" :label='false'>未退休</el-radio>
  </el-radio-group>
        </el-form-item>


        <el-form-item class="my_item" label="备注" prop="note">
          <el-input
            size="small"
         v-model="addData.note"
            placeholder="请输入备注"
          />
        </el-form-item>

        <el-form-item class="my_item" label="" >
         
        </el-form-item>
    </div>

        <el-form-item>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="addDio = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
              type="primary"
              @click="handleCopyAdd(RefAdd)"
              >确 定</el-button
            >
          </div>
        </el-form-item>
 
      </el-form>
    </el-dialog>



        <el-dialog
  size="small"
      title="时间范围选择"
      v-model="time_selection"
      width="25%"
    >

    <el-form
     
        size="small"
        label-width="80px"
      >
     <el-form-item label="时间范围：">
         <el-date-picker
          value-format="YYYY-MM-DD HH:mm:ss"
        v-model="time_range"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
      />
        </el-form-item>

        <el-form-item>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="time_selection = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
              type="primary"
              @click="Downloadok()"
              >确 定</el-button
            >
          </div>
        </el-form-item>
 
      </el-form>
      
    </el-dialog>



    </div>

  </template>
    
    <script setup name="systemRole">
  import { onMounted, ref, watch } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import {
    Search,
    CirclePlus,
    Upload,
    Download,
    Delete,
    Filter,
  } from "@element-plus/icons-vue";
  import { useProjectStore } from "../../stores/project";
  import { storeToRefs } from "pinia";
  import {
    DeleteEmployeeInfo,
    GetEmployeeInfos,
    AddEmployeeInfo,
    GenerateWorkloadStatisticsFile,
   
  } from "../../api/dept";
  import PinYinMatch from "pinyin-match";
  let store = useProjectStore();
  
  let list_filtered = ref([]);
  let time_selection = ref(false)
  let time_range = ref(null)
  let { projectInfo } = storeToRefs(store);
  
  let proName = ref("");
  let sex_ = ref([])


  let Downloadok = async () => {
 if(!time_range) return
let res = await GenerateWorkloadStatisticsFile({ 
  start_time: time_range.value[0],
  end_time: time_range.value[1],
 });

    let filename = res.headers; //下载后文件名
    let filename2 = ""; //下载后文件名
    filename = filename["content-disposition"];
    filename = window.decodeURI(filename);
    filename2 = filename.split(";")[1].split("filename*=UTF-8''")[1];
    filename = filename.split(";")[1].split("filename=")[1];
    const link = document.createElement("a"); // 创建a标签
    const blo = new Blob([res.data], { type: res.data.type }); // 设置下载格式
    link.style.display = "none";
    const url = window.URL.createObjectURL(blo);
    link.href = url;
    if (filename == undefined) {
      filename = filename2;
    }
    link.download = filename;

    // link.setAttribute('download', "fileName")
    document.body.appendChild(link);
    link.click(); // 触发下载
    window.URL.revokeObjectURL(url); // 释放掉blob对象
    document.body.removeChild(link);

    time_range.value = null
    time_selection.value = false
  }


  watch(proName, async () => {
    if (proName.value) {
      let res = await GetEmployeeInfos();
      let newData = res.map(v=>{
        return {
            ...v,
            age:`${calculateAge(v.birthday)}岁`,
        }
    })
      let data = JSON.parse(JSON.stringify(newData));
      tableDataPro.value = data
        .filter(
          (v) =>
            v.name.includes(proName.value)
        )
       
    } else {
        getProTable(
        {},
         sex_.value,
         work_major_.value,
         educational_.value,
         professional_post_.value,
         design_post_.value,
         qualification_.value,
       


      );
    }
  });
  
  let matchProfessional = (searchContent) => {
    if (searchContent) {
      let result = [];
      professional_leader_data_options.value.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);
        if (matchResult) {
          result.push(item);
        }
      });
   
      professional_leader_data_options_PY.value = result;
    } else {
      professional_leader_data_options_PY.value = professional_leader_data_options.value;
    }
  };
  
  let matchTeamLeader = (searchContent) => {
    if (searchContent) {
      let result = [];
      team_leader_options.value.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);
        if (matchResult) {
          result.push(item);
        }
      });
  
      team_leader_options_PY.value = result;
    } else {
      team_leader_options_PY.value = team_leader_options.value;
    }
  };

   let RefEdit = ref(null)
  let  closeFrom = () => {
    RefEdit.value.resetFields();
  }

  let handleCopyEquipEdit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      // 保存数据
      await AddEmployeeInfo({
        ...editData.value,
        last_modify_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
      });
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      editDio.value = false;
      getProTable(
        {},
         sex_.value,
         work_major_.value,
         educational_.value,
         professional_post_.value,
         design_post_.value,
         qualification_.value,
       
      );
    }
  });
};


let handleCopyAdd = (formEl) => {
    if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      // 保存数据
      await AddEmployeeInfo({
        ...addData.value,
        last_modify_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
      });
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      addDio.value = false;
      getProTable(
        {},
         sex_.value,
         work_major_.value,
         educational_.value,
         professional_post_.value,
         design_post_.value,
         qualification_.value,
       
      );
    }
  });


}

let RefAdd =ref(null)
let addDio = ref(false)
let addData = ref({
  retirement:false,
})
let editDio = ref(false)
let editData = ref({})
let RulesEdit = ref({
    job_number: [{ required: true, message: '请输入', trigger: 'blur' }],
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择', trigger: 'change' }],
    birthday: [{ required: true, message: '请选择', trigger: 'change' }],
    school: [{ required: false, message: '请输入', trigger: 'blur' }],
    school_major: [{ required: false, message: '请输入', trigger: 'blur' }],
    work_major: [{ required: false, message: '请选择', trigger: 'change' }],

    educational: [{ required: false, message: '请输入', trigger: 'blur' }],

    work_time: [{ required: false, message: '请选择', trigger: 'change' }],
    retirement:[{ required: false, message: '请选择', trigger: 'change' }],
    professional_post: [{ required: false, message: '请选择', trigger: 'change' }],
    tenure: [{ required: false, message: '请选择', trigger: 'change' }],
    qualification: [{ required: false, message: '请选择', trigger: 'change' }],
    telephone: [{ required: false, message: '请输入', trigger: 'blur' }],
    cellphone: [{ required: false, message: '请输入', trigger: 'blur' }],
    registration: [{ required: false, message: '请输入', trigger: 'blur' }],
    design_class: [{ required: false, message: '请输入', trigger: 'blur' }],
    design_post: [{ required: false, message: '请选择', trigger: 'change' }],
    certificate_number: [{ required: false, message: '请输入', trigger: 'blur' }],
    certificate_endtime: [{ required: false, message: '请选择', trigger: 'change' }],
    class_scope: [{ required: false, message: '请输入', trigger: 'blur' }],
    continuing_education_time:[{ required: false, message: '请输入', trigger: 'blur' }],
    note: [{ required: false, message: '请输入', trigger: 'blur' }],
})
  let editTable = (data) => {
    editDio.value = true
    editData.value = {...data}

  }


  let deleteRow = async(data) => {
    await DeleteEmployeeInfo({id:data.id})
    getProTable(
        {},
         sex_.value,
         work_major_.value,
         educational_.value,
         professional_post_.value,
         design_post_.value,
         qualification_.value,
       
      );
   ElMessage.success('删除成功')

  }


  let design_post_options = ref([
    {
        value:'校核',
        label:'校核', 
    },
    {
        value:'审定',
        label:'审定', 
    },
    {
        value:'审核',
        label:'审核', 
    },
    
    
  ])

  
  let qualification_options = ref([
 
    {
        value:'设计',
        label:'设计', 
    },
    {
        value:'校核',
        label:'校核', 
    },
    {
        value:'审定',
        label:'审定', 
    },
    {
        value:'审核',
        label:'审核', 
    },
    {
        value:'办事员',
        label:'办事员', 
    },

   
  ])

  let professional_post_options = ref([
    {
        value:'见习生',
        label:'见习生', 
    },
    {
        value:'助工',
        label:'助工', 
    },
    {
        value:'工程师',
        label:'工程师', 
    },
    {
        value:'高工',
        label:'高工', 
    },
    {
        value:'高高工',
        label:'高高工', 
    },
    
    {
        value:'办事员',
        label:'办事员', 
    },
  ])
  
  let educational__options = ref([
  {
        value:'本科',
        label:'本科',
    },
    {
        value:'本科(双学位)',
        label:'本科(双学位)',
    },
    {
        value:'博士研究生',
        label:'博士研究生',
    },
    {
        value:'大学本科',
        label:'大学本科',
    },
    {
        value:'大学毕业',
        label:'大学毕业',
    },
    {
        value:'硕士研究生',
        label:'硕士研究生',
    },
    {
        value:'研究生',
        label:'研究生',
    },
  ]);



  let work_major_options = ref([
   
    {
        value:'设备一组',
        label:'设备一组',
    },
    {
        value:'设备二组',
        label:'设备二组',
    },
    {
        value:'工业炉',
        label:'工业炉',
    },

    {
        value:'粉体',
        label:'粉体',
    },
    {
        value:'管理',
        label:'管理',
    },
    {
        value:'办事员',
        label:'办事员',
    },
   
  ])

  let addcCloseFrom = () => {
    RefAdd.value.resetFields()
  }

  let newPerson = () => {
    addDio.value = true
  }


  let proj_name_data = ref([])
  let proj_name_data_options = ref([])
  let professional_leader_data = ref([])
  let professional_leader_data_options = ref([])
  let professional_leader_data_options_PY = ref([])
  let team_leader_data = ref([])
  let team_leader_options = ref([])
  let team_leader_options_PY  = ref([])
  
  let work_major_ = ref([])
  let educational_ = ref([])
  let professional_post_ = ref([])
  let design_post_= ref([])
  let qualification_ =ref([])

  let reT_ = ref([])


  let dowLoad_DATA = async() => {
time_selection.value= true

  }


  let calculateAge = (birthday) => {
  // 创建一个日期对象，表示出生日期
  const birthDate = new Date(birthday);

  // 创建一个日期对象，表示当前日期
  const today = new Date();

  // 计算年份差
  let age = today.getFullYear() - birthDate.getFullYear();

  // 如果生日还没到，年龄减1
  if (today.getMonth() < birthDate.getMonth() || 
      (today.getMonth() === birthDate.getMonth() && today.getDate() < birthDate.getDate())) {
    age--;
  }

  return age;
}

  let getProTable = async (data,sex=[],work_major=[],educational=[],professional_post=[],design_post=[],qualification=[],retirement=[]) => {
    let res = await GetEmployeeInfos(data);

    let newData = res.map(v=>{
        return {
            ...v,
            age:`${calculateAge(v.birthday)}岁`,
        }
    })

    let ORGdata = JSON.parse(JSON.stringify(newData));
    const filters = {
        sex, 
        work_major,
        educational,
        professional_post,
       design_post,
       qualification,
       retirement
    };
  
    
    tableDataPro.value = multiFilter(JSON.parse(JSON.stringify(ORGdata)), filters)
  
  };
  
  function multiFilter(array, filters) {
    const filterKeys = Object.keys(filters);
   
    return array.filter((item) => {
      return filterKeys.every((key) => {
 if (!filters[key].length) return true;
        return !!~filters[key].indexOf(item[key]);
      });
    });
  }
  
  let getOptionsData = (data, str) => {
    return [...new Set(data.map((v) => v[str]))]
      .filter((v) => {
        if (v) {
          return v;
        }
      })
      .map((v) => {
        return {
          value: v,
          label: v,
        };
      });
  };
  
  
  watch([sex_,educational_,professional_post_,design_post_,qualification_,work_major_,reT_],()=>{
    getProTable(
        {},
         sex_.value,
         work_major_.value,
         educational_.value,
         professional_post_.value,
         design_post_.value,
         qualification_.value,
       reT_.value,


      );
  })
  
  
  let personOptions = ref([]);
  
  
  
  
  let tableDataPro = ref([]);
  
  
  

  
  
  
  watch(
    projectInfo,
    () => {
      if (projectInfo.value && Object.keys(projectInfo.value).length > 0) {
        
        getProTable(
        {},
         sex_.value,
         work_major_.value,
         educational_.value,
         professional_post_.value,
         design_post_.value,
         qualification_.value,
       reT_.value,


      );
      }
    },
    { immediate: true }
  );
  
  
  
  
  let activeHeight = ref(0);
  
  
  let userOptionsleader = ref([]);
  let optionsNewteam_leader = ref([]);
  
  
  // 页面加载时
  onMounted(() => {
    activeHeight.value =
      document.querySelector(".system-role-padding").clientHeight - 80;
    window.addEventListener("resize", () => {
      activeHeight.value =
        document.querySelector(".system-role-padding").clientHeight - 80;
    });
  });
  </script>
    
    <style scoped lang="scss">
  .m-header {
    display: flex;
    align-items: center;
  }
  .m-header .pro-name {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .m-header .el-input {
    width: 300px;
  }
  .m-header .el-button {
    margin-right: 10px;
  }
  
  .system-role-container {
    .system-role-padding {
      padding: 15px;
      .el-table {
        flex: 1;
      }
    }
  }
  .button_footer {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
  }
  .table_content {
    margin-top: 20px;
  }
  
  ::v-deep(.el-table--large .el-table__cell) {
    padding: 6px 0;
  }
  
  .table_box {
    padding: 20px 50px;
  }
  
  .button_poastion_flex_iem {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  
  .el-tabs--right .el-tabs__content,
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
  
  .backgroun_border {
    // 	::v-deep .el-tabs__header {
    //     margin-top: 39px;
    //   }
  }
  
  ::v-deep(.el-tabs__item::after) {
    position: absolute;
    content: " ";
    top: 0;
    width: 2px;
    height: 100%;
    background: #eee;
    right: 0;
  }
  
  
  .active {
    color: rgb(24, 144, 255);
  }
  
  .icone {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  ::v-deep(.cell){
    // display: flex;
    // align-items: center;
  }

  ::v-deep(.my_item){
      margin-bottom: 20!important;
      width: 50%;
  }

  ::v-deep(.el-form .el-form-item:last-of-type) {
    margin-bottom: 20!important;
}
  </style>
    